<template>
	<view class="work">
		<u-navbar :fixed="true" :placeholder="true" bgColor="#0F53AC" leftIconColor="#fff">
			<view class="u-nav-slot user" slot="left">
				<view class="userImg">
					<image class="uuimg" v-if="mineUserImg!=''" :src="mineUserImg" mode=""></image>
					<image class="uuimg" v-else src="../../static/images/index/logo.png" mode=""></image>
				</view>
				<view class="userCompany">
					{{shortName ? shortName : mineCompanyName}}
				</view>
			</view>
		</u-navbar>
		<view class="top-box">
			<view class="item" v-for="(item,index) in topList" :key="item.id" @click="changePage(item)">
				<!-- <view v-if="item.readNum>0" class="red-dot " :class="[item.readNum>99?'red-dot2':'']">
          {{item.readNum>99?'99+':item.readNum}}
        </view>
        <image class="item-icon" :src="item.ioc"></image> -->
				<view :class="item.id == 1 ? 'blue' : item.id==2 ? 'org' : 'green'">
					{{item.readNum}}
				</view>
				<view class="item-text">{{item.title}}</view>
			</view>
		</view>
		<view class="index-grid" style="margin-bottom: 16rpx;">
			<view class="grid-title title-box">
				<view>快捷入口</view>
				<view class="btn" @click="handleToCheck">编辑</view>
			</view>
			<view class="main-item" v-if="fastList.length">
				<view class="item" v-for="(item,index) in fastList" :key="item.id" @click="changePage(item)">
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
				</view>
			</view>
			<view v-else class="noItem">
				<image class="img" src="../../static/images/index/noMenu.png" mode=""></image>
				<view>
					暂未设置快捷入口
				</view>
			</view>
		</view>
		<view class="index-grid" style="margin-bottom: 24rpx;">
			<view class="grid-title">应用中心</view>
			<u-tabs :list="applicationList" :lineWidth="80" lineColor="#0F53AC" :activeStyle="activeStyle"
				:scrollable="false" :inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick"
				:current="current">
			</u-tabs>
			<view style="border-top:1px solid rgba(229, 229, 229, 1);" v-if="isServer">
				<view v-for="(item,index) in showList" :key="item.id">
					<view class="server-title">{{item.title}}</view>
					<view class="main-item" style="border-top: none;">
						<view class="item" v-for="(it,inx) in showList[index].children" :key="it.id"
							@click="changePage(it)">
							<view v-if="it.readNum>0" class="red-dot" :class="[it.readNum>99?'red-dot2':'']">
								{{it.readNum>99?'99+':it.readNum}}
							</view>
							<!-- <image class="item-icon" :src="it.ioc"></image> -->
							<view class="item-icon"
								:style="{backgroundImage: 'url(' + it.ioc + ')','background-repeat':'no-repeat', backgroundSize:'100% 100%'}">
								<u-badge v-if="setBadgeValue(it.url)" type="error" max="99"
									:value="setBadgeValue(it.url)" :absolute='true' :offset="[-6,-8]"></u-badge>
							</view>
							<view class="item-text">{{it.title}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="main-item" style="border-top: 1px solid rgba(229, 229, 229, 1);padding-top: 16rpx;" v-else>
				<view class="item" v-for="(item,index) in showList" :key="item.id" @click="changePage(item)">
					<view v-if="item.readNum>0" class="red-dot " :class="[item.readNum>99?'red-dot2':'']">
						{{item.readNum>99?'99+':item.readNum}}
					</view>
					<image class="item-icon" :src="item.ioc"></image>
					<view class="item-text">{{item.title}}</view>
					<u-badge v-if="setBadgeValue(item.url)" type="error" max="99" :value="setBadgeValue(item.url)"
						:absolute='true' :offset="[0,10]"></u-badge>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<tabBar :current="0" />
		<!-- <u-popup :show="showPwdTip" mode="center">
			<view class="tip_box">
				<view class="title">
					提示
				</view>
				<view class="top">
					<view class="top_w">
						欢迎使用智督云安全生产集团版
					</view>
					<view class="top_w">
						为了您更好的使用系统，您可以在【我的-账号信息】完善手机号等相关信息
					</view>
					<view class="top_n">
						提示：手机号用于接收各类消息推送
					</view>
				</view>
				<view class="btn">
					<view class="forget_btn" @click="gotoMine">
						去设置
					</view>
					<view class="cacel_btn" @click="cacelset">
						暂不设置
					</view>
				</view>
			</view>
		</u-popup> -->

		<u-modal :show="showPwdTip" title="提示" cancelText="暂不设置" confirmText="保存" :showCancelButton="companyStatus == 1"
			confirmColor="#0F53AC" @confirm="gotoMine()" @cancel="cacelset()">
			<view class="slot-content">
				<view class="tip_box">
					<view class="top">
						<view class="top_o">
							欢迎使用智督云-集团版
						</view>
						<view class="top_w">
							为了您更好的使用本系统，建议您完善一些基本信息
						</view>
						<view class="top_s my-input">
							<view class="title">
								<view style="color: red;">*</view>姓名：
							</view>
							<u-input border="surround" cursorSpacing="60" placeholder="请输入用户名"
								v-model="dataForm.realName" inputAlign="left" maxlength="8">
								<template slot="suffix">
									<div class="myLength">{{realNameLength}}/8</div>
								</template>
							</u-input>
						</view>
						<view class="top_s my-input">
							<view class="title">
								<view style="color: red;" v-if="companyStatus == 3">*</view>手机号：
							</view>
							<u-input border="surround" cursorSpacing="60" placeholder="请输入手机号"
								v-model="dataForm.userTel" inputAlign="left" maxlength="32">
							</u-input>
						</view>
						<view class="top_n">
							提示：手机号用于接收各类消息推送
						</view>
					</view>
				</view>
			</view>
		</u-modal>

	</view>
</template>

<script>
	import tabBar from '../../components/tabbar/tabbar.vue';
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		components: {
			tabBar
		},
		data() {
			return {
				mineUserImg: '',
				mineCompanyName: '',
				topList: [{
						id: 1,
						title: "我提交的",
						ioc: "../../static/images/index/anquan.png",
						isMarginLeft: false,
						url: "/pages/subPackagesA/myAgent/mySumbit",
						readNum: 0,
					},
					{
						id: 2,
						title: "待执行任务",
						ioc: "../../static/images/index/suishoupai.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/myAgent/waitExecute",
						readNum: 0,
					},
					{
						id: 3,
						title: "待我审核",
						ioc: "../../static/images/index/yinhuanguanli.png",
						isMarginLeft: true,
						url: "/pages/subPackagesA/myAgent/waitProcess",
						readNum: 0,
					},
				],
				list1: [],
				list2: [],
				list3: [],
				list4: [],
				fastList: [],
				// 应用中心tab
				applicationList: [{
						name: '双控管理'
					},
					{
						name: '设备管理'
					},
					{
						name: '教育培训'
					}
					// {
					//   name: '生产管理'
					// },
				],
				activeStyle: {
					color: 'rgba(15, 83, 172, 1);',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					height: '100rpx',
					fontSize: '32rpx'
				},
				current: 0,
				// 显示的数据源
				showList: [],
				// 是否为安全监管
				isServer: true,
				verifyCount: 0, //未验证数量
				maintainCount: 0, //未维保
				checkCount: 0, //未点检
				repairCount: 0, //未维修
				refundCount: 0,
				applyCount: 0,
				showPwdTip: false,
				dataForm: {
					realName: '', //用户名
					userTel: '', //电话
				},
				realNameLength: 0,
				//企业状态；1. 试用账号； 2.试用到期；3.VIP账号； 4.VIP到期；5.安责险用户；6.安责险到期；
				companyStatus: 1,
			}
		},
		computed: {
			...mapState(['menuStatus'])
		},
		watch: {
			menuStatus: function(val) {
				if (val) {
					const menu = uni.getStorageSync('menu')
					if (menu) {
						this.getMenuList()
					}
				}
			},
			'dataForm.realName'(val) {
				this.realNameLength = val.length
			},

		},
		onLoad() {
			uni.hideShareMenu({
				menus: ['shareAppMessage', 'shareTimeline']
			})
			const sinfo = uni.getSystemInfoSync();
			const that = this

			//企业微信
			if (sinfo.environment && sinfo.environment == 'wxwork') {
				setTimeout(() => {
					this.companyStatus = uni.getStorageSync('userInfo').companyStatus
					this.dataForm.realName = uni.getStorageSync('userInfo').realName
					// vip账号
					if (this.companyStatus == 3) {
						this.showPwdTip = uni.getStorageSync('userInfo').userTel == ''
					} else {
						this.showPwdTip = this.$store.state.firstLoginFlag == 1 ? true : false
					}

				}, 2000)
			}
		},
		onShow() {
			// const sinfo = uni.getSystemInfoSync();
			// if (sinfo.environment && sinfo.environment == 'wxwork'){

			// 	var pages = getCurrentPages(); // 获取当前页面栈
			// 	var currentPage = pages[pages.length - 1]; // 当前页面
			// 	if (currentPage.data.needGetData) {
			// 		currentPage.data.needGetData = false;
			// 		this.getMenuList()
			// 	}

			// 	return
			// }
			let token = uni.getStorageSync('userInfo').token;
			if (token) {
				this.getMenuList()
				uni.removeStorageSync('ksitme');
			}
		},
		onPullDownRefresh() {
			this.getMenuList()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 400)
		},
		methods: {
			...mapMutations(["setfirstLoginFlag"]),
			getNum() {
				uni.$u.http.get('/device/mobile/deviceRepair/getNotDealNum').then(res => {
					if (res.code == 0) {
						this.topList.map(item => {
							// 待执行数量
							if (item.url == '/pages/subPackagesA/myAgent/waitExecute') {
								item.readNum = res.data.notFinishNum
							} else if (item.url == '/pages/subPackagesA/myAgent/waitProcess') {
								// 待审核
								item.readNum = res.data.notApproveNum
							} else {
								// 我提交的
								item.readNum = res.data.submitNum
							}
						})

					}
				})
			},
			getMenuList(type) {
				uni.$u.http.get('/base/mobile/sysMenuInfo/getMobileMenuListByRole').then(res => {
					if (res.code == 0) {
						if (res.data) {
							// this.list1 = this.getList1(res.data)
							this.fastList = this.getList2(res.data.commonAppletList)
							// 安全监管
							this.list2 = this.getList3(res.data.safeMenus)
							// 设备管理
							this.list3 = this.getList3(res.data.deviceMenus)
							// 教育培训
							this.list4 = this.getList4(res.data.trainMenus)
							this.showList = this[`list${this.current+2}`]
						}
						this.getNum()
						this.getCompanyInfo()
						this.getUntreatedData()
					}
				})
			},
			cacelset() {
				this.showPwdTip = false
				this.setfirstLoginFlag(0)
			},
			gotoMine() {
				if (!this.dataForm.realName) {
					uni.showToast({
						icon: 'none',
						title: '用户名不能为空！'
					})
					return
				}
				if (this.companyStatus == 3) {
					if (!this.dataForm.userTel) {
						uni.showToast({
							icon: 'none',
							title: '手机号码不能为空！'
						})
						return
					}
				}

				if (this.dataForm.userTel) {
					let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/; //正则表达式定义手机号正确格式
					if (!reg.test(this.dataForm.userTel)) { //判断手机号格式时候正确
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none'
						})
						return
					}
				}


				uni.$u.http.put(`/base/mobile/userInfo/updateLoginUserInfo`, this.dataForm).then(res => {
					if (res.code == 0) {
						uni.showToast({
							title: '设置成功'
						})
						let params = uni.getStorageSync('userInfo')

						params.userTel = this.dataForm.userTel
						params.realName = this.dataForm.realName
						uni.setStorageSync('userInfo', params)
						this.showPwdTip = false
						this.setfirstLoginFlag(0)
					}
				}).catch(err => {})

			},

			changePage(e) {
				if (!e.url) {
					uni.showToast({
						icon: 'none',
						title: e.title + '正在开发中...'
					})
				} else {
					if (e.title == '一键扫码') {
						// uni.navigateTo({
						// 	url: e.url+'?id='+"da1ae199904c486ca8160c43690ad4c1"
						// })
						uni.scanCode({
							//是否只能从相机扫码,不能从相册扫码
							onlyFromCamera: true,
							//规定扫码类型  字节跳动小程序不支持此参数
							// barcode就是一维码(条形码)  qrcode就是(er)维码 
							// datamatrix就是Data Matrix码   pdf417就是PDF417条码
							scanType: ['barCode', 'qrCode', 'datamatrix', 'pdf417'],
							// 是否启动自动识别字符编码功能
							autoDecodeCharset: false,
							// 是否开启自动放大功能  仅 App-Android (3.5.4+) 支持
							autoZoom: false,
							// 是否支持手动输入条形码  仅飞书小程序（V3.14.0）支持
							barCodeInput: false,
							success: function(res) {
								let codeInfo = res.result.split('?')[1]
								//这里获取扫码信息并且对扫码信息进行解析
								let equId = codeInfo.split('&')[0];
								let deviceNum = codeInfo.split('&')[1];
								let id = equId.split('=')[1]
								uni.navigateTo({
									url: e.url + '?id=' + id
								})
							},
							fail: function(error) {}
						});
					} else {
						uni.navigateTo({
							url: e.url
						})

					}
				}

			},
			tabsClick(e) {
				this.current = e.index
				this.showList = this[`list${e.index+2}`]

				// 安全监管 设备管理
				if (e.index == 0 || e.index == 1) {
					this.isServer = true
				} else {
					this.isServer = false
				}
			},
			// 编辑常用应用
			handleToCheck() {
				uni.navigateTo({
					url: `/pages/work/editMenu?fastList=${JSON.stringify(this.fastList)}`
				})
			},

			//获取登录用户所属企业信息
			getCompanyInfo() {
				uni.$u.http.get(`/base/mobile/companyInfo/getCompanyInfo`).then(res => {
					if (res.code == 0) {
						this.mineUserImg = res.data.logo
						this.mineCompanyName = (res.data.shortName && res.data.shortName != '') ? res.data
							.shortName : res.data.companyName
					}
				}).catch(err => {})
			},
			getUntreatedData() {
				const that = this
				uni.$u.http.get(`/device/mobile/deviceInfo/getUntreatedDeviceTask`).then(res => {
					if (res.code == 0) {
						that.verifyCount = res.data.verifyCount //维修验收 数量
						that.maintainCount = res.data.maintainCount //维保管理 数量
						that.checkCount = res.data.checkCount //点检管理 数量
						that.repairCount = res.data.repairCount //维修管理 数量
					}
				}).catch(err => {

				})
				uni.$u.http.get(`/device/mobile/devicePart/getUntreatedPart`).then(res => {
					if (res.code == 0) {
						that.refundCount = res.data.refundCount //退还数量
						that.applyCount = res.data.applyCount //申请数量
					}
				}).catch(err => {

				})
			},
			setBadgeValue(url) {
				let badge = 0
				switch (url) {
					case '/pages/subPackagesA/repairList/index':
						badge = this.repairCount
						break;
					case '/pages/subPackagesA/repairverify/index':
						badge = this.verifyCount
						break;
					case '/pages/subPackagesB/weibaoTask/index':
						badge = this.maintainCount
						break;
					case '/pages/subPackagesB/checkupTask/index':
						badge = this.checkCount
						break;
					case '/pages/subPackagesB/bjreturn/index':
						badge = this.refundCount
						break;
					case '/pages/subPackagesB/bjverify/index':
						badge = this.applyCount
						break;
				}
				return badge
			},
			getList2(menu) {
				let list = []
				let step = 0
				menu.forEach(item => {
					if (item) {
						if (item.menuUrl) {
							step++
							let obj = {
								id: item.id,
								title: item.menuName,
								// ioc: `../../static/images/index/${item.menuName}.png`,
								ioc: item.menuIcon,
								isMarginLeft: step == 1 ? false : true,
								url: item.menuUrl
							}
							list.push(obj)
						}
					}
				})
				return list
			},
			getList3(menu) {
				let list = []
				menu.forEach(item => {
					if (item) {
						if (item.menuPid == '0') {
							let step = 0
							let newArr = menu.filter(it => it.menuPid == item.id)
							let obj = {
								id: item.id,
								title: item.menuName,
								children: []
							}
							newArr.map(ie => {
								if (ie.menuUrl) {
									step++
									let ob = {
										id: ie.id,
										title: ie.menuName,
										// ioc: `../../static/images/index/${ie.menuName}.png`,
										ioc: ie.menuIcon,
										isMarginLeft: step == 1 ? false : true,
										url: ie.menuUrl
									}
									obj.children.push(ob)
								}
							})
							list.push(obj)
						}
					}
				})
				return list
			},
			getList4(menu) {
				let list = []
				let step = 0
				menu.forEach(item => {
					if (item) {
						if (item.menuUrl == '/pages/subPackagesC/mineTrain/index' ||
							item.menuUrl == '/pages/subPackagesC/learning/index' ||
							item.menuUrl == '/pages/subPackagesC/exam/index'
						) {
							step++
							let obj = {
								id: item.id,
								title: item.menuName,
								// ioc: `../../static/images/index/${item.menuName}.png`,
								ioc: item.menuIcon,
								isMarginLeft: step == 1 ? false : true,
								url: item.menuUrl
							}
							list.push(obj)
						}
					}
				})
				return list
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f2f2f2;
	}

	.my-input {
		border-bottom: 1px solid #F5F5F5;

		/deep/ .u-input {
			background-color: #f2f2f2 !important;
		}

		.myLength {
			color: #909193;
			font-size: 12px;
			padding: 1px 4px;
		}
	}

	.work {
		height: 100%;
		background: #f2f2f2;
		padding: 16rpx;
	}

	.top-box {
		display: flex;
		justify-content: space-around;
		padding: 24rpx;
		background-color: #fff;
		margin-bottom: 16rpx;
		border-radius: 8rpx;

		.item {
			padding: 20rpx 0;
			display: flex;
			flex-direction: column;
			align-items: center;

			.red-dot {
				z-index: 22;
				position: absolute;
				margin-left: 80rpx;
				margin-top: -15rpx;
				border-radius: 50%;
				width: 32rpx;
				height: 32rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24rpx;
				background: #fa4016;
				color: #fff;
			}

			.red-dot2 {
				width: 42rpx;
				height: 32rpx;
				line-height: 32rpx;
				border-radius: 10rpx;

			}

			.item-icon {
				width: 96rpx;
				height: 96rpx;
			}

			.item-text {
				font-size: 14px;
				font-weight: 400;
				color: #333333;
				margin-top: 16rpx;
			}
		}
	}

	.index-grid {
		border-radius: 8rpx;
		background: #fff;
		padding-bottom: 40rpx;

		.title-box {
			display: flex;
			justify-content: space-between;
		}

		.server-title {
			font-size: 30rpx;
			color: #000000;
			padding-left: 24rpx;
			padding-top: 40rpx;
		}

		.grid-title {
			height: 100rpx;
			padding: 0 32rpx;
			line-height: 100rpx;
			// padding: 26rpx 32rpx 26rpx 20rpx;
			font-size: 18px;
			display: flex;
			align-items: center;
			font-weight: 500;
			color: #000000;
			border-bottom: 1px solid rgba(229, 229, 229, 1);
		}


		.main-item {
			display: flex;
			flex-wrap: wrap;
			// border-top: 1px solid #f2f2f2;
			padding: 0 16rpx;

			.item {
				position: relative;
				// padding: 20rpx 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 25%;
				margin-top: 32rpx;

				.u-badge--error.data-v-13728ffe {
					background-color: #fa4016 !important;

				}

				.u-badge--dot.data-v-13728ffe {
					width: 10px !important;
					height: 10px !important;
				}

				.red-dot {
					z-index: 22;
					position: absolute;
					margin-left: 50rpx;
					margin-top: -15rpx;
					border-radius: 50%;
					width: 32rpx;
					height: 32rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
					background: #fa4016;
					color: #fff;
				}

				.red-dot2 {
					width: 42rpx;
					height: 32rpx;
					line-height: 32rpx;
					border-radius: 10rpx;

				}

				.item-icon {
					position: relative;
					width: 80rpx;
					height: 80rpx;
				}

				.item-text {
					font-size: 14px;
					font-weight: 400;
					line-height: 14px;
					color: #000000;
					margin-top: 16rpx;
				}
			}

			.item2 {
				margin-left: 60rpx;
			}
		}
	}

	.line {
		width: 100%;
		height: 24rpx;
		background: #f2f2f2;
	}

	.blue {
		color: #0F53AC;
		font-size: 48rpx;
	}

	.org {
		color: #ED7615;
		font-size: 48rpx;
	}

	.green {
		color: #1FC4B9;
		font-size: 48rpx;
	}

	.btn {
		height: 44rpx;
		line-height: 44rpx;
		padding: 8rpx 24rpx;
		margin-left: 10rpx;
		border-radius: 4px;
		color: #0F53AC;
		font-size: 24rpx;
		border: 1px solid #0F53AC;
	}

	.user {
		display: flex;

		.userImg {
			width: 60rpx;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			margin-right: 16rpx;

			.uuimg {
				width: 60rpx;
				height: 60rpx;
			}
		}

		.userCompany {
			width: 500rpx;
			color: white;
			line-height: 60rpx;
			max-width: 50%;
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; // 默认不换行；
		}
	}

	.noItem {
		text-align: center;
		padding: 26rpx 20rpx;
		color: rgba(166, 166, 166, 1);

		.img {
			width: 224rpx;
			height: 124rpx;
			margin-bottom: 24rpx;
			margin-top: 36rpx;
		}
	}

	.tip_box {

		.top {
			font-size: 28rpx;

			.top_o {
				color: #000;
				font-size: 32rpx;
			}

			.top_w {
				margin: 20rpx 0;
			}

			.top_n {
				color: #aeaeae;
			}
		}

		.top_s {
			margin-bottom: 16rpx;

			.title {
				display: flex;
				color: #4D4D4D;
				margin-bottom: 8rpx;
			}
		}


		.btn {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.cacel_btn {
				border-radius: 12rpx;
				border: 1px solid #aeaeae;
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #aeaeae;
				width: 45%;
				height: 60rpx;
				line-height: 60rpx;
			}

			.forget_btn {
				border-radius: 12rpx;
				border: 1px solid #02ad82;
				text-align: center;
				font-size: 34rpx;
				font-weight: 500;
				color: #02ad82;
				width: 45%;
				height: 60rpx;
				line-height: 60rpx;
			}
		}
	}
</style>
